<template>
	<view class="content">
		<bgyx-nav-bar>
			<div slot="left">
				<image :src="`/static/images/link${$store.state.websocket.connectState ? 's' : 'f'}.png`"
					style="width: 60rpx;height: 60rpx;" mode=""></image>
			</div>
			<div slot="default">
				<b style="font-size: 32rpx;">通讯录(68)</b>
			</div>
			<div slot="right">
				<u-icon name="plus" size="40" />
			</div>
		</bgyx-nav-bar>
		<view style="display: flex;flex-direction: column; position: fixed;top: 80px;left: 0px;width: 750rpx;z-index: 99;background: white;padding: 16rpx;">
			<view class="list-cell" style="padding: 0px;">
				<image src="/static/images/icon_adduser.png" style="width: 100rpx;height: 100rpx;"
					mode=""></image>
				<view class="name-view" style="color: dodgerblue;  font-weight: bold;display: flex;justify-content: space-between;">
					<span>添加好友</span>
					<view style="padding-right: 16rpx;">
						<u-icon name="arrow-right" />
					</view>
				</view>
			</view>
			<view class="list-cell" style="padding: 0px;">
				<image src="/static/images/icon_msguser.png" style="width: 100rpx;height: 100rpx;"
					mode=""></image>
				<view class="name-view" style="border: none; color: dodgerblue;font-weight: bold;display: flex;justify-content: space-between;">
					<span>好友申请</span>
					<view style="padding-right: 16rpx;">
						<u-icon name="arrow-right" />
					</view>
				</view>
			</view>
		</view>
		<view style="height: 230rpx;">
			
		</view>
		<u-index-list :sticky="false" :scrollTop="scrollTop">
			<view style="width: 750rpx;" v-for="(item, index) in indexList" :key="index">
				<u-index-anchor :index="item" />
				<view style="width: 100%;height: 10rpx;"></view>
				<view class="list-cell">
					<image src="/static/images/avatar.png" style="width: 80rpx;height: 80rpx;border-radius: 40rpx;"
						mode=""></image>
					<view class="name-view">
						列表1
					</view>
				</view>
				<view class="list-cell">
					<image src="/static/images/avatar.png" style="width: 80rpx;height: 80rpx;border-radius: 40rpx;"
						mode=""></image>
					<view class="name-view">
						列表1
					</view>
				</view>
				<view class="list-cell">
					<image src="/static/images/avatar.png" style="width: 80rpx;height: 80rpx;border-radius: 40rpx;"
						mode=""></image>
					<view class="name-view" style="border: none;">
						列表1
					</view>
				</view>
				<view style="width: 100%;height: 10rpx;"></view>
			</view>
		</u-index-list>

		<u-tabbar></u-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U",
					"V", "W", "X", "Y", "Z"
				]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			...mapState({
				// 从state中拿到数据 箭头函数可使代码更简练
				user: state => {
					console.log(999, state)

					return state.user.user
				}
			})
		},
		async onShow() {
			const ret = await this.$u.get(`/user/user/2`)
			console.log(43234, ret)
		},
		methods: {
			change1: function() {},
			click1: function() {},
			change: function() {
				this.$event.pub(`ces`, 888)
				this.$socket.send({
					type: "text",
					data: "撒旦解放和"
				})
				this.$store.dispatch({
					type: "vuex1/setName",
					payload: "四大护法"
				})
				// this.$store.dispatch({
				// 	type:"vuex0/setName",
				// 	payload:"等等"
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 0px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		align-items: center;
	}

	.name-view {
		margin-left: 16rpx;
		border-bottom: 1rpx solid #e3e3e355;
		flex: 1;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		padding: 10px 0px;
	}
</style>